<template>
  <div>
    About Powerful Vue
    <clr-dropdown position="bottomLeft" v-if="showMenu" :opened.sync="opened" toggleClass="btn-outline" :closeOnOutsideClick="false">
      <template slot="toggle">
            Hello Clarity-Vue
</template>

<template slot-scope="scope">
  <clr-dropdown-header>
    Header is here
  </clr-dropdown-header>
  <clr-dropdown-item v-for="i in 6" :key="i">
    Item {{i}}
  </clr-dropdown-item>
   <clr-dropdown-divider></clr-dropdown-divider>
   <clr-dropdown position="rightBottom"
                  :opened.sync="subMenuOpened"
                  :closeOnItemClick="false"
                  :closeOnOutsideClick="false"
                  :parentOpened="scope.opened"
                  :siblingClicked="scope.clickedItem">
      <span slot="toggle">Sub Menu</span>
      <template>
        <clr-dropdown-item v-for="i in 3" :key="i">
          Sub Item {{i}}
        </clr-dropdown-item>
      </template>
    </clr-dropdown>
</template>
      </clr-dropdown>
        </div>

</template>

<script>
import ClrDropdown from "./dropdown/ClrDropdown";
import ClrDropdownHeader from "./dropdown/ClrDropdownHeader";
import ClrDropdownItem from "./dropdown/ClrDropdownItem";

export default {
  name: "about",
  components: {
    ClrDropdown,
    ClrDropdownHeader,
    ClrDropdownItem
  },
  data() {
    return {
      showMenu: true,
      opened: true
    };
  }
};
</script>
